<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">

<head>
    <th:block th:include="common/common_head :: commonHeader('组织机构')"/>
</head>

<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-condition">
            <form id="dept-form">
                <div class="select-list">
                    <ul>
                        <li>
                            机构名称：<input type="text" name="name"/>
                        </li>
                        <li>
                            <button type="button" class="btn btn-primary btn-rounded btn-sm" onclick="queryTable()"><i class="fa fa-search"></i>&nbsp;搜索</button>
                            <button class="btn btn-warning btn-rounded btn-sm" type="reset"><i class="fa fa-eraser"></i>&nbsp;重置</button>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-info order-table">
            <div class="btn-group hidden-xs toolbar" id="toolbar" role="group">
                <a class="btn btn-outline btn-success btn-rounded" onclick="toAddDept()" shiro:hasPermission="sys:dept:save">
                    <i class="fa fa-plus"></i> 新增
                </a>
            </div>
            <table id="deptTreeTable" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('sys:dept:edit')}]];
    var delFlag = [[${@permission.hasPermi('sys:dept:delete')}]];
    var tree_table_option={
        "url": ctxPath+"/sys/dept/getUserDeptList",
        "idField": "deptId",
        "parentId": "parentId",
        "treeShowField": "name",
        "treeColumn": 0,
        "columns": [
            {
                field: 'deptId',
                visible: false
            },{
                field:'name',
                title:'名称'
            },{
                field:'orderNum',
                title:'排序码'
            },{
                title: '操作',
                formatter: function (value, row, index) {
                    var step = "    ";
                    var edit = "<button type='button' class='btn btn-success btn-xs "+ editFlag +"' onclick='toEditDept( " + row.deptId +
                        ")'><i class='fa fa-edit'>编辑</i> </button>";
                    var del = "<button type='button' class='btn btn-danger btn-xs "+ delFlag +"' onclick='deleteDept( " + row.deptId +
                        ")'><i class='fa fa-remove'>删除</i> </button>";
                    return edit + step + del;
                }
            }
        ]
    };
    TREE_TABLE.init("deptTreeTable", tree_table_option);

    function reloadTable() {
        TREE_TABLE.refresh();
    }
    function queryTable() {
        TREE_TABLE.search('dept-form');
    }


    // 新增
    function toAddDept(){
        var index = Dialog.openUrl('添加门店', ctxPath+'/modules/sys/dept/dept_add.html', {
            area : ['820px' , '580px'],
            maxmin: true
        });
        layer.full(index);
    }

    /**
     * 编辑
     */
    function toEditDept(id) {
        var index = Dialog.openUrl('编辑门店', ctxPath+'/sys/dept/toEdit/'+id, {
            area : ['820px' , '580px'],
            maxmin: true
        });
        layer.full(index);
    }

    function deleteDept(id) {
        Dialog.confirm("确认要删除？", function () {
            Page.ajaxPOST(ctxPath + "/sys/dept/delete/"+id, null, function (data) {
                //刷新列表
                Dialog.msg("操作成功", function () {
                    queryTable();
                });
            });
        });

    }

    function searchDept() {
        queryTable();
    }
</script>

</body>
</html>
